<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .com{
                position: fixed;
                right: 5%;
                bottom: 10%;
            }
            .com a{
                display: block;
                position: relative;
                margin: 15px 0px;
            }
            .com a .note{
                display: none;
                position:absolute;
                width: 100px;
                left: -110px;
                text-align: right;
                font-family: "microsoft yahei";
            }
            .logo img{
                width: 25px;
            }
            .hidden{
                display: none;
            }
            .com>a:hover .static{
                display: none;
            }
            .com>a:hover .hidden{
                display: inline-block;
            }
            .com>a:hover .note{
                display: inline-block;
                color: red;
            }
            ul{
                width: 75%;
                margin: 0 auto;
            }
            ul>li{
                list-style-type: none;
                display: inline-block;
            }
            ul>li:hover img{
                box-shadow: 0px 5px 30px 5px rgba(0,0,0,1);
                position: relative;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
            <li><a href=""><img src="product.jpg" alt=""></a></li>
        </ul>
        <div class="com">
            <a href="">
                <span class="note">
                    <img src="erweima.png" width="100px">
                </span>
                <span class="logo">
                    <span class="static"><img src="1-1.png" alt=""></span>
                    <span class="hidden"><img src="1-2.png" alt=""></span>
                </span>
            </a>
            <a href="">
                <span class="note">
                    个人中心
                </span>
                <span class="logo">
                    <span class="static"><img src="2-1.png" alt=""></span>
                    <span class="hidden"><img src="2-2.png" alt=""></span>
                </span>
            </a>
            <a href="">
                <span class="note">
                    售后服务
                </span>
                <span class="logo">
                    <span class="static"><img src="3-1.png" alt=""></span>
                    <span class="hidden"><img src="3-2.png" alt=""></span>
                </span>
            </a>
            <a href="">
                <span class="note">
                    人工客服
                </span>
                <span class="logo">
                    <span class="static"><img src="4-1.png" alt=""></span>
                    <span class="hidden"><img src="4-2.png" alt=""></span>
                </span>
            </a>
            <a href="">
                <span class="note">
                    购物车
                </span>
                <span class="logo">
                    <span class="static"><img src="5-1.png" alt=""></span>
                    <span class="hidden"><img src="5-2.png" alt=""></span>
                </span>
            </a>
        </div>
    </body>
</html>